<template>
    <main>
        <div id="mui-player" class="abp" ref="muiPlayer" style="position: relative;">
            <div ref="commentStage" class='container' style="z-index: 1 !important;height: 325px;width: 100%;"></div>
        </div>

        <toggle-url 
            @changeurl="cmSend" 
            placeholder="Send a live danmaku" 
            buttonText="Send Danmaku"
            type="text">
        </toggle-url>
    </main>
</template>

<script>
    import config,{ customSettingFun } from '../../public/js/config_demo_danmaku.js'
    import globals from '../../public/js/global'
    import { listener } from '../../public/js/playerListener'
    import danmakuData from '../../public/js/comments'

    import toggleUr from '../toggle-url'
    export default {
        components:{
            toggleUr
        },
        data() {
            return {
                loadType:'mp4',
                playerConfig:{}, // 播放器配置

                _disableTime:true,
                playTime:0,
                _timeout_1:null,
            }
        },
        created() {
        },
        mounted() {
            this.initCreateDanmaku();

            this.playerConfig = Object.assign({},config);
            this.playerConfig['height'] = '420px';
            let customSetting = new customSettingFun();

            if(this.$lang.indexOf('en') > -1) {
                this.playerConfig['lang'] = 'en';
                this.playerConfig['title'] = 'Your Title';

                // Toggle Language EN Danmaku
                customSetting[0].functions = 'Danmaku'
                customSetting[0].childConfig[0].functions = 'ON';
                customSetting[0].childConfig[1].functions = 'Opacity';
                customSetting[0].childConfig[2].functions = 'Danmaku speed';
                customSetting[0].childConfig[2].childConfig = [{ functions:'0.5 times' },{ functions:'Normal',selected:true },{ functions:'1.5 times' },{ functions:'2.0 times' },{ functions:'2.5 times' },{ functions:'3.0 times' }];
                customSetting[0].childConfig[3].functions = 'Font size';
            }else if(this.$lang.indexOf('zh') > -1) {
                this.playerConfig['lang'] = 'zh-cn';
                this.playerConfig['title'] = '你的视频标题';
            }

            this.playerConfig.plugins.push({
                ...new MuiPlayerDesktopPlugin({
                    customSetting:customSetting, // 自定义设置组菜单
                    thumbnails:globals.thumbnails, // 缩略图配置
                })
            })

            console.log(this.playerConfig);
            let muiplayer = new MuiPlayer(this.playerConfig);
            globals.mp = muiplayer;

            listener();
            this.addPlayListener();
        },
        beforeDestroy() {
            globals.mp.destory();
        },
        destroyed() {
        },
        methods:{
            /**
             * 初始化创建 CCL 实例
             */
            initCreateDanmaku() {
                var danmakuContainer = this.$refs.commentStage;
                globals.CM = new CommentManager(danmakuContainer);

                // 初始化弹幕管理器
                globals.CM.init();
                // 挂载 CCL 弹幕数据列表
                globals.CM.load(JSON.parse(JSON.stringify(danmakuData))); 

                // 开放 CM 对象到全局这样就可以在 console 终端里操控
                window.CM = globals.CM;
                // console.log(globals.CM);
            },
            /**
             * 视频播放器容器大小变化，控制弹幕窗口同步拉伸
             */
            autoscaleComment() {
                let _this = this;
                var stage = globals.CM.stage;
                var mpContainer = _this.$refs.muiPlayer;

                if(_this._timeout_1) { clearTimeout(_this._timeout_1) };
                _this._timeout_1 = setTimeout(function() {
                    stage.style.height = (mpContainer.clientHeight - 80) + 'px';
                    globals.CM.init(); // 重新初始化弹幕管理器并绑定舞台大小
                },500)
            },
            cmSend(text) {
                if(text) {
                    globals.CM.send({
                        mode:1,
                        text:text,
                        size:36,
                        color:0x2D8CF0
                    });
                }
            },
            cmClear() {
                globals.CM.clear();
            },
            cmInsert() {
                globals.CM.insert({
                    mode:1,
                    text:'Insert Danmaku',
                    stime:10000,
                    size:25,
                    color:0x0000FF
                })
            },
            /**
             * 添加播放事件监听
             */
            addPlayListener() {
                let _this = this;
                globals.mp.on('ready',function(e) {
                    globals.mp.video().addEventListener('play',function() {
                        _this.playTime = globals.mp.video().currentTime * 1000;
                        _this._disableTime = true;
                        globals.CM.start();
                        _this.triggerTime();
                    })

                    globals.mp.video().addEventListener('pause',function() {
                        _this._disableTime = false;
                        globals.CM.stop();
                    })
                    
                    globals.mp.video().addEventListener('seeked',function() {
                        _this.cmClear();
                        _this.playTime = globals.mp.video().currentTime * 1000;
                    })

                    globals.mp.on('fullscreen-change',function(data) {
                        _this.autoscaleComment();
                    })
                });
            },
            /**
             * 触发通报 CCL 播放时间
             */
            triggerTime() {
                let _this = this;
                if(!_this._disableTime || globals.closeDanmaku === true) { return };

                setTimeout(function() {
                    _this.playTime += 100; // 每100毫秒追加时间轴，生成模拟播放

                    console.log('Polling => ' + (_this.playTime / 1000) + 's');
                    globals.CM.time(_this.playTime); // 通报播放时间
                    _this.triggerTime(); // 轮询调用
                },100);
            }
        }
    }
</script>

<style lang="less" scoped>
    
</style>